<%@ page contentType="text/html" %>
<%@ page pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>

<%@ include file="header.jsp" %>
<!--[if IE]><script language="javascript" type="text/javascript" src="../../js/flot/excanvas.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="../../js/flot/jquery.flot.js"></script>
<script>
	$(function() {
		$( "#progressbar" ).progressbar({
			value: 90
		});
	});
</script>

<div>
	<h3>Results for the category "<c:out value="${subscription.room.category.name}"/>"</h3>
	<p title="100% is the best"><strong>Ranking Position : <span id="rankpos"><c:out value="${userRanking}"/></span>% </strong></p>
	<div id="progressbar"></div>
	<p><strong>Points : <span id="points"><c:out value="${totalPoints}"/></span> </strong></p>
	<br/>
</div>

	<p class="PlotTitle">Minority</p>
	<div id="placeholder2" style="width:700px;height:150px"></div>
	<br/>
	<p class="PlotTitle">Your Score</p>
    <div id="placeholder" style="width:700px;height:300px"></div>
<div class="downloadCSV">
			<a href="../csv/getSubscriptionHistory?id=<c:out value="${subscription.id}"/>">
				Download the room history<img src="../../resources/csv.png" title="Download csv file"/>
			</a>
</div>


<script id="source" language="javascript" type="text/javascript">
$(function () {
	var yourscore = [<c:out value="${votes}"/>];
    var minority = [<c:out value="${summaries}"/>];
    var options1 = {
	   series: {
	     lines: {show: true },
	     points: {show: true, fill: true, fillColor: "rgb(247, 163, 7)" , radius: 4}	
	   },
	   colors: ["#369"],
       xaxis: {max: 50, tickSize: 5, tickDecimals: 0},
	   yaxis: {minTickSize: 1, ticks: 10, tickDecimals: 0},
    };
    var options2 = {
    	series: {
	   		lines: { show: true },
	       	points: {show: true, fill: true, fillColor: "rgb(0, 255, 255)", radius: 4 }
	    },	
       	colors: ["#369"],
    	yaxis: {ticks: [[-1, "<c:out value="${question.answerB}"/>"], [0, ""], [1, "<c:out value="${question.answerA}"/>"]]},
    	xaxis: {max: 50, tickSize: 5, tickDecimals: 0},
    };

    $.plot($("#placeholder2"), [{data: minority}], options2);
    $.plot($("#placeholder"), [{data: yourscore}], options1);
    
    
    var progressValue = new Number(document.getElementById("rankpos").innerHTML);
	$("#progressbar").progressbar( "value" , progressValue.valueOf());
    
});
</script>

<%@ include file="footer.jsp" %>

